// 函数式组件
import { useState } from 'react'

function ActivitiesList(props) {
    return (props.activities.length > 0 ?
        <ol>{props.activities.map((item, index) => {
            return <li key={index}>{item}</li>
        })}</ol>
        : '目前没有特别推荐的活动')
}

function PlantInfo(props) {
    const [showActivities, setShowActivities] = useState(true)
    return <div>
        <h1>{props.name} <button onClick={() => setShowActivities(!showActivities)}>展示/隐藏</button></h1>
        <p>{props.description}</p>
        {showActivities && <ActivitiesList activities={props.activities} />}
    </div>
}
export default PlantInfo;